<template>
    <div class="strategy">
        <ToolBar :names="names"></ToolBar>
        <div class="server padding_lr5">
            <span>订阅服务</span>
            <el-switch
                    v-model="value"
                    @change="changestatus"
                    active-color="#13ce66"
                    inactive-color="#D0D0D1">
            </el-switch>
        </div>
        <div class="total">
            <div class="total-item">
                <span>${{info.price}}</span>
                <span>初始资产</span>
            </div>
            <div class="total-item">
                <span class="color-n">${{info.nowprice}}</span>
                <span>当前资产</span>
            </div>

            <div class="total-item">
                <span class="color-y">{{info.lv*100|parseint}}%</span>
                <span>总收益率</span>
            </div>
        </div>
        <div class="newest">
            <div class="title">
                <span class="dian"></span>最新持币<span class="number">({{info.re}})</span>
            </div>
            <div class="classifyList">
                <span v-for="(l,index) in currency" :key="index">{{l.title}}({{l.price}})</span>

            </div>
        </div>
        <div class="newest exchange">
            <div class="title">
                <span class="dian"></span>交易操作
            </div>
            <div class="classifyList">
                                    <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
                <table>

<!--                    <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">-->
                        <tr v-for="(l,item) in list" :key="item">
                            <td class="green" v-if="l.type == 2">买</td>
                            <td class="red" v-if="l.type == 1">卖</td>
                            <td>{{l.create_time|formatDate}}</td>
                            <td class="green1">{{l.title}}/USDT</td>
                            <td>${{l.price}}</td>
                            <td class="yellow">{{l.num}} <span>个</span></td>
                        </tr>
<!--                    </van-list>-->


                </table>
                                    </van-list>
            </div>
        </div>


    </div>

</template>

<script>
    import ToolBar from "@/components/Home/ToolBar.vue"
    export default {
        name: "strategy",
        components:{
            ToolBar
        },
        data(){
            return {
                names:'策略跟单',
                value:false,
                type:'cl',
                info:{},
                currency:{},
                page:1,
                list:[],
                loading: false,//控制上拉加载的加载动画
                finished: false,//控制在页面往下移动到底部时是否调用接口获取数据
                isLoading: false,//控制下拉刷新的加载动画


            }
        },
        filters:{
            parseint(val){
                let num = ''
                num = val.toFixed(2)

                return num
            }
        },
        mounted() {
            this.$api.home.Clprice(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.info = res.data.data

            })
            this.$api.home.Cl(this.getCookie('token')).then(res=> {
                // 执行某些操作
                if(res.data.data == 1){
                    this.value = true
                }else{
                    this.value = false
                }
            })
            this.$api.home.ClCurrency(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.currency = res.data.data

            })
            // this.getList()

        },
        methods:{
            changestatus(val){
                this.$api.home.serviceset(this.getCookie('token'),this.type).then(res=> {
                    // 执行某些操作
                    // this.info = res.data.data


                    this.$api.home.Cl(this.getCookie('token')).then(res=> {
                        // 执行某些操作
                        if(res.data.data == 1){
                            this.value = true
                        }else{
                            this.value = false
                        }
                    })
                })
            },

            onLoad() {
                let self = this;
                setTimeout(() => {
                    self.$api.home.ClOrder(this.getCookie('token'),this.page).then(res=> {
                        // 执行某些操作
                        self.list = self.list.concat(res.data.data);
                        self.loading = false;
                        self.page++;
                        if (res.data.data.length<10) {
                            self.finished = true;
                        }

                    })


                }, 500);
            }

        }
    }
</script>

<style scoped>
    .strategy{
        position: relative;
        top: 3rem;

    }
    .total{

        display: flex;
        justify-content: space-between;
        align-items: center;
        background:#fff;
        height: 5.13rem;
    }
    .total>div{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 33%;
        border-right: 1px solid #e7e7e7;
        text-align: center;

    }
    .total>div:last-child{
        border: none;
    }
    .total-item span{
        display: inline-block;
        width: 100%;
    }
    .total-item span:first-child{
        font-size:1.25rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin-bottom: 1rem;
    }
    .total-item span:last-child{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);

    }
    .color-n {
        color: #14A365!important;
    }

    .color-y{
        color: #FFCA3B!important;
    }
    .newest{
        padding: 0 1rem;
        margin: 0.5rem auto;
        background: #fff;
    }
    .exchange{
        margin-bottom: 4rem;
    }
    .title{
        border-bottom: 1px solid #e7e7e7;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:#333;
        height: 2.5rem;
    }
    .dian{
        width:0.38rem;
        height:0.38rem;
        background:rgba(20,163,101,1);
        border-radius:50%;
        margin-right: 0.5rem;
    }
    .number{
        color: #FFCA3B;
        margin-left: 0.5rem;
    }
    .classifyList{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;

    }
    .classifyList span{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 30%;
        padding: 0.5rem 0;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);

    }
    table{
        width: 100%;
    }
    table tr{

        /*display: table;*/
        width: 100%;
    }
    table tr:last-child{
        border: none;
    }
    table tr td{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align: center;
        border-bottom: 1px solid #e7e7e7;

    }
    .green{
        color: #14A365;
        font-weight: bold;
    }
    .green1{
        color:#14A365;
    }
    .yellow{
        color: #FFB32E;
    }
    .red{
        color: #f00;
    }
    .padding_lr5{
        padding: 0 0.5rem;
    }
    .server{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        height: 3rem;
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
    }
    .van-list{
        width: 100%;
    }
</style>